<template>
    <div>
        <el-container>
            <el-header>
                <div  class="header">
                  <el-row>
                      <el-col :span=4 class="headerCol">
                          <el-image :src="require('../../../img/littleIcon/doctorLogo.png')"></el-image>
                      </el-col>
                      
                      <el-col :span=12 class="headerSex">
                        <el-steps :active="1" finish-status="success" simple='true'>
                            <el-step title="选择疫苗机构" icon="el-icon-edit"></el-step>
                            <el-step title="查看疫苗机构" icon="el-icon-edit"></el-step>
                            <el-step title="预约疫苗" icon="el-icon-edit"></el-step>
                        </el-steps>
                      </el-col>
                  </el-row>                  
              </div>
            </el-header>
            <el-main>
                <el-row class="text-row">
                  <el-col :span='24'>
                    <h3>
                        {{this.$store.state.vaccinItem.deptName}}
                        <label style="color:red">&nbsp;&nbsp;{{this.$store.state.vaccinItem.setCount}}&nbsp;针</label>
                    </h3>
                    <span>{{this.$store.state.vaccinItem.deptAddress}}</span>&nbsp;&nbsp;<br><br>
                    <span>当天总数：{{this.$store.state.vaccinItem.tVaccinNoteDept.daySumCount}}</span><br><br>
                    <span>已预约：{{this.$store.state.vaccinItem.tVaccinNoteDept.orderCount}}</span>
                    <el-button type="primary" icon="el-icon-edit" class="btnOrder" @click="btnOrder">立即预约</el-button>
                  </el-col>
              </el-row>
              <el-divider></el-divider>
              <el-row class="text-row">
                  <el-col :span='24'>                      
                      <el-image class='icon' :src="require('../../../junM/img/mealdedail1.png')"></el-image>
                      预约需知<br>
                      <VaccinDesc></VaccinDesc>
                  </el-col>
              </el-row>
              <el-divider></el-divider>
              <el-row class="text-row">
                  <el-col :span='24'>
                      <div style="width:730px;">
                          <el-image class='icon' :src="require('../../../junM/img/mealdedail2.png')"></el-image>
                          疫苗描述<br><br>
                          <span style="font-size:20px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{this.$store.state.vaccinItem.deptDesc}}</span>
                      </div>
                  </el-col>
              </el-row>
            </el-main>
        </el-container>
    </div>
</template>

<script>
import VaccinDesc from '../../../components/vaccin/vaccinDesc.vue'
import axios from 'axios'
export default {
    methods:{
        btnOrder(){
            // this.$router.push("/vaccinApply")
            axios.get("/member/queryByMemerId")
            .then(res => {
                this.$router.push({
                    name:"vaccinApply",
                    params:{
                        member:res.data
                    }
                });                
            })
            .catch(err=>{
                this.$router.push('/login')
                alert("为了您的信息的安全，请先登录后，才能查看");
                console.log(err)
            })
        }
    },
    components:{
        VaccinDesc
    }
}
</script>

<style scoped>
    .headerSex{
        margin-top:20px;
    }
    .headerCol{
        margin-top: 10px;
        text-align: left;
    }
    /* .headerCol{
        margin-top: 10px;
        text-align: left;
    } */
    .text-row{
        text-align: left;
        cursor: pointer;
    }
    .icon{
        width: 20px;
        height: 20px;
    }
    .btnOrder{
        float: right;
    }
</style>